<template>
  <div class="boxContent">
    <div class="appBox">

      <div class="top flex_sb">
        <div class="flex left">
          <div class="cup flex"
               @click="$router.go(-1)">
            <el-icon size="18">
              <Back />
            </el-icon>
            <div class="ruturn">返回</div>
          </div>
          <div class="title"> 查看账单 </div>
        </div>

      </div>
      <div class="searchList mt20">
        <el-form :model="state.params"
                 ref="FormInstance "
                 class="boxFrom ">
          <div class="searchBox ">
            <template v-for="(item, index) in state.totalInputColumns"
                      :key="index">
              <el-form-item v-if="item.type == 'input'">
                <el-input clearable
                          v-model="state.params[item.key]"
                          :placeholder="item.label"></el-input>
              </el-form-item>
              <el-form-item v-if="item.type == 'select'">
                <el-select v-model="state.params[item.key]"
                           :placeholder="item.label"
                           clearable>
                  <el-option v-for="i in state.optionsPre"
                             :key="i"
                             :label="i.dictValue"
                             :value="i.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="item.type == 'time'">
                <el-date-picker v-model="state.timexx"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始时间"
                                value-format="YYYY-MM-DD"
                                end-placeholder="结束时间" />
              </el-form-item>

            </template>
          </div>
          <el-form-item class="btns">
            <!-- <el-button v-preventReClick type="primary"
                       @click="methods.handleAction('export')"
                       v-permission="15">下载账单</el-button> -->
            <el-button v-preventReClick
                       type="primary"
                       @click="methods.handleAction('export')"
                       v-permission="1143">导出</el-button>
            <el-button v-preventReClick
                       type="primary"
                       plain
                       @click="methods.handleAction('query')">搜索</el-button>
            <el-button v-preventReClick
                       @click="methods.handleAction('reset')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table border
                v-loading="state.loading"
                :data="state.tableData"
                style="width: 100%"
                :header-cell-style="{ color: '#000' }">
        <el-table-column prop="batchNo"
                         label="账单编号"
                         show-overflow-tooltip
                         align="center"
                         width="150" />
        <el-table-column prop="workDate"
                         label="账单日期"
                         show-overflow-tooltip
                         align="center"
                         width="150" />
        <el-table-column prop="peopleCount"
                         label="打卡人数"
                         show-overflow-tooltip
                         width="150"
                         align="center" />
        <el-table-column prop="type"
                         label="账单类型"
                         width="150"
                         show-overflow-tooltip
                         align="center">
          <template #default="scope">
            {{scope.row.type == 1 ? '日常消耗扣款' : '日常消耗扣款'}}
          </template>
        </el-table-column>
        <el-table-column prop="name"
                         label="派遣企业"
                         show-overflow-tooltip
                         align="left" />
        <el-table-column prop="status"
                         label="状态"
                         width="150"
                         show-overflow-tooltip
                         align="center">
          <template #default="scope">
            {{scope.row.status == 1 ? '已扣款' : '未扣款'}}
          </template>
        </el-table-column>
        <el-table-column prop=""
                         label="账单详情"
                         width="150"
                         show-overflow-tooltip
                         align="center">
          <template #default="scope">
            <div class="primary cup"
                 v-permission="1144"
                 @click="$router.push('/balance/enterpriseBillDetails?data=' + JSON.stringify(scope.row) )">账单详情</div>
          </template>
        </el-table-column>

      </el-table>
      <div class="pagination">
        <el-pagination background
                       v-model:current-page="state.params.pageNum"
                       v-model:page-size="state.params.pageSize"
                       :page-sizes="[10, 20, 30, 50]"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="state.totalSize"
                       @size-change="methods.handleSizeChange"
                       @current-change="methods.handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, getCurrentInstance } from "vue";
import { ElMessage, ElLoading, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const app = getCurrentInstance()?.proxy;
const initState = () => {
  return {
    loading: false,
    dialogVisible: false,
    totalSize: 0,
    timexx: [],
    tableData: [],
    params: {
      pageNum: 1,
      pageSize: 10,
      cid: ''
    },
    totalInputColumns: [
      { key: "startTime", label: "开始日期", type: "time" },

    ],
    tableIdsSelect: [],
  };
};
const state = reactive(initState());
onMounted(() => {
  state.params.cid = app.$route.query.id;
  methods.getDataList();

});
const methods = {

  // 禁用表格选择
  selectable (row, index) {
    if (row.approveStatus == 0) {
      return false;
    } else {
      return true;
    }
  },

  // 表格多选
  handleSelectionChange (e) {
    console.log(e, "表格多选");
    state.tableIdsSelect = e.map((res) => res.id);
    console.log(state.tableIdsSelect);
  },

  handleAction (type, data) {
    switch (type) {

      case "export": //查询 
        app.$http
          .get(
            `/companywalletflow/exportWalletFlow?cid=${state.params.cid}&startTime=${state.timexx[0] || ''}&endTime=${state.timexx[1] || ''}`,
            { responseType: "arraybuffer" }
          )
          .then((res) => {
            if (res) {
              app.$parse.downloadExcel(res, '账单数据')
            }
          });
        break;
      case "query": //查询
        methods.getDataList();
        break;
      case "reset": // 重置
        // state.params = initState().params;
        state.timexx = []
        break;
      case "edit": // 编辑
        router.push("/balance/reconciliationDetails?id=" + data.id);
        break;



    }
  },


  getDataList () {
    if (state.timexx?.length) {
      state.params.startTime = state.timexx[0];
      state.params.endTime = state.timexx[1];
    } else {
      state.params.startTime = ''
      state.params.endTime = ''
    }
    state.loading = true
    app.$get("/companywalletflow/queryWalletFlowFlat", state.params).then((res) => {
      state.tableData = res.data.data;
      state.totalSize = res.data.total;
      state.loading = false
    }).catch(() => {
      state.loading = false
    })
  },
  //分页变化
  handleSizeChange () {
    state.params.pageNum = 1;
    methods.getDataList();
  },
  //表格翻页
  handleCurrentChange () {
    methods.getDataList();
  },
};
</script>

<style lang="scss" scoped>
.pagination {
  margin-top: 20px;
  height: 50px;
  display: flex;
  justify-content: flex-end;
}
.width400 {
  width: 400px;
  margin-left: 30px;
}
.top {
  .ruturn {
    color: rgba(121, 121, 121, 1);
    font-size: 16px;
    position: relative;
    margin-left: 10px;
    margin-top: -2px;
  }
  .ruturn::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 4px;
    width: 1px;
    height: 16px;
    background: rgba(121, 121, 121, 0.8);
  }
  .left {
    align-items: center;
  }
  .title {
    color: rgb(83, 83, 83);
    font-size: 16px;
    margin-left: 40px;
    font-weight: bold;
  }
}
</style>